<template>
  <view class="item-content" v-for="item in column" :key="item.prop">
    <view
      v-if="!item.customLabel"
      class="label u-tips-color"
      :style="{ width: item.width + 'rpx' }"
      >{{ item.label }}:</view
    >
    <view
      v-else
      class="label u-tips-color"
      :style="{ width: item.width + 'rpx' }"
    >
      <slot :name="item.customLabel" :prop="item.prop" :data="data" />
    </view>
    <view v-if="!$slots[item.prop]" class="value right-content u-content-color">
      <readMore :hideLineNum="2">
        {{ data[item.prop] || emptyValue }}
      </readMore>
    </view>
    <view v-else class="value right-content u-content-color">
      <slot :name="item.prop" :prop="item.prop" :data="data" />
    </view>
  </view>
</template>
<script lang="ts" setup>
import readMore from './readMore.vue';
const props = defineProps<{
  data: any;
  column: any[];
  emptyValue?: string;
}>();
const { data, column } = toRefs(props);
</script>
<style lang="scss" scoped>
.item-content {
  display: flex;
  align-items: top;
  justify-content: space-between;
  margin-bottom: 20rpx;

  .label {
    text-align: left;
  }
  .right-content {
    flex: 1;
    width: 0;
  }
  .value {
    text-align: right;
    word-break: break-all;
  }
}
</style>
